<template>
	<view>


		<view class="container" :style="{'height': widHeight +'px'}">
			<view class="btn">
				<u-action-sheet :actions="list" @select="selectClick" cancelText="取消" :closeOnClickOverlay="true"
					:closeOnClickAction="true" :title="title" :show="show" @close="close"></u-action-sheet>
				<u-button icon='arrow-down' size=10 @click="show = true" style="font-size: 16px;">{{FeedbackType}}</u-button>
			</view>

			<!-- 			<u--textarea v-model="value2" @input="input" :height="200" placeholder="对我们网站、商品、服务，你还有什么建议吗？你还希望在商城上买到什么？请告诉我们..."
				count></u--textarea> -->
			<textarea style="height: 200px;background-color: white;width: 100%;" @blur="blur" v-model="value2"
				placeholder="对我们网站、商品、服务，你还有什么建议吗？你还希望在商城上买到什么？请告诉我们..." auto-focus />
			<view class="feed-iamge">
				<view class="feed-view" v-for="(item,indexsrc) in src" :key="indexsrc" @click="preview">
					<image :src="item" mode="scaleToFill"></image>
				</view>
				<view class="feed-view" @click="choose">
					<image src="../../static/加号.png" mode="scaleToFill"></image>
				</view>

			</view>

			<view class="tel">手机号码</view>

			<view class="feed-tel">

				<u--input @blur="blurtel" placeholder="方便我们与你联系" v-model="value" border="bottom" clearable></u--input>
			</view>
			<view>

				<button class='u-buttonz' @click="feedback">提交</button>

			</view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: [],
				title: '请选择反馈类型',
				list: [{
						name: '商品相关'
					},
					{
						name: '功能异常'
					},
					{
						name: '优化建议'
					},
					{
						name: '其他'
					}
				],
				show: false,
				FeedbackType: '请选择反馈类型',
				value2: '',
				value: '',
				widHeight: 0,

				ogid: 0,
				orderGoods: {},
				content: '',
				stars: [0, 1, 2, 3, 4],
				star: 5,
				starText: '十分满意',
				hasPicture: false,
				picUrls: [],
				files: []
			};
		},
		onLoad() {
			uni.$setNavigationBarColor()
			const windowInfo = uni.getWindowInfo()
			this.widHeight = windowInfo.windowHeight //可使用窗口宽度
		},
		methods: {
			//选择图片
			choose() {
				if (this.src.length >= 5) {
					console.log(this.src[0],"123")
					uni.editImage({
					  src: this.src[0], // 图片路径
						success(res){
							
						},
						fail(err){
							console.log(err,"err")
						},
					})
					return uni.$showToast("最多可以五张", "error")
				}
				let _this = this
				uni.chooseImage({
					count: 3,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success(res) {
						// tempFilePath可以作为img标签的src属性显示图片

						_this.src = [...res.tempFilePaths, ..._this.src]

					}
				})
			},
			//预览图片
			preview() {
				uni.previewImage({
					current: this.src[0], // 当前显示图片的http链接
					urls: this.src // 需要预览的图片http链接列表
				})
			},
			blur(e) {
				this.value2 = e.detail.value

			},
			blurtel(e) {
				this.value = e
			},
			//提交意见
			feedback() {
				const tel = /^1[3-9]\d{9}$/
				if (this.value2.length == 0) {
					return uni.$showToast("反馈不能为空!", "error")
				} else if (this.value == '') {
					return uni.$showToast("手机号不能为空!", "error")
				} else if (!tel.test(this.value)) {
					return uni.$showToast("手机号不正确!", "error")
				} else if (this.FeedbackType == '请选择反馈类型') {
					return uni.$showToast("请选择反馈类型!", "error")
				} else {
					uni.showLoading({ //显示消息提示框
						title: '提交中...',
					})
					setTimeout(() => {
						uni.hideLoading() //隐藏消息提示框
						uni.switchTab({
							url: "/pages/my/my"
						})
					}, 1000)
				}
			},
			selectClick(index) {
				this.FeedbackType = index.name
			},
			close() {
				this.show = false
			},


		}
	}
</script>
<style lang="scss">
	.container {
		background-color: #f4f4f4;

		.feed-tel {

			background-color: white;

			text {
				padding-left: 20rpx;
				font-size: 20rpx;
				color: #9f9f9f;
			}
		}

		.tel {
			margin-top: 40rpx;
			margin-bottom: 20rpx;
			font-size: 26rpx;
			padding-left: 20rpx;
		}

		.btn {
			margin-bottom: 20rpx;
			background-color: white;
		}

		.feed-iamge {
			width: 100%;
			background-color: white;
			padding-top: 20px;
			display: flex;

			image {
				width: 50px;
				height: 50px;
				margin-left: 10px;
			}
		}

		.u-buttonz {
			background-color: #9f9f9f;
			border-radius: 30px;
			color: #fff;
			display: block;
			width: 80%;
			justify-self: center;
			position: absolute;
			bottom: 10px;
			left: 0;
			right: 0;
		}
	}
</style>